<div id="app">
  <toolbar></toolbar>
  <button @click="isDark=!isDark">切换</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const ThemeButton = {
    inject: ['theme'],
    template: `
    <div :class="['button', theme.value]" ><slot></slot></div>
  `
  }
  const Toolbar = {
    components: { ThemeButton },
    inject: ['theme'],
    template: `<div :class="['toolbar', theme.value]">
      <theme-button>确定</theme-button>
    </div>`
  }

  Vue.createApp({
    data() {
      return { isDark: false }
    },
    //provide: { theme: 'dark'},
    // provide() {
    //   return { theme: this.isDark?'dark':'white' }
    // },
    provide() {
      return { theme: Vue.computed(()=>this.isDark?'dark':'white') }
    },
    components: { Toolbar },
  }).mount('#app')
</script>
<style>
  .toolbar {
    border: 1px solid #333;
    color: #333;
    padding: 10px;
  }

  .toolbar.dark {
    background: #333;
    color: #fff;
  }

  .button {
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    display: inline-block;
  }

  .button.dark {
    background: #666;
    color: #fff;
  }
</style>